<template>
  <CustomNav title="我的点赞"></CustomNav>
  <view class="container">
    <view class="box" v-for="(item, index) in guestFilmList" :key="index">
      <view class="top" @click="handleViewBigPhoto">
        <u-image
          :show-loading="true"
          :src="guestFilmList[index]?.imgs[0]"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        ></u-image>
        <u-image
          :show-loading="true"
          :src="guestFilmList[index]?.imgs[1]"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        ></u-image>
        <u-image
          :show-loading="true"
          :src="guestFilmList[index]?.imgs[2]"
          width="200rpx"
          height="200rpx"
          radius="16rpx"
        ></u-image>
      </view>
      <view class="bottom" @click="handleViewBigPhoto">
        <view class="two">
          <u-image
            :show-loading="true"
            :src="guestFilmList[index]?.imgs[3]"
            width="200rpx"
            height="200rpx"
            radius="16rpx"
          ></u-image>
          <u-image
            :show-loading="true"
            :src="guestFilmList[index]?.imgs[4]"
            width="200rpx"
            height="200rpx"
            radius="16rpx"
          ></u-image>
        </view>
        <view class="one">
          <u-image
            :show-loading="true"
            :src="guestFilmList[index]?.imgs[5]"
            width="430rpx"
            height="430rpx"
            radius="16rpx"
          ></u-image>
        </view>
      </view>
      <view class="info">
        <view class="nickname">{{ item.title }}</view>
        <view class="love" @click="handleLove(item.id, index)">
          <!-- <u-icon name="heart" color="#FF79C6" size="40rpx"></u-icon> -->
          <i
            class="iconfont icon-guanzhu-zhihui"
            :class="{ active: item.isLiked ? true : false }"
          ></i>
          <view class="count">{{ item.likedCount }}</view>
        </view>
      </view>
      <view class="viewAll">
        <view @click="handleViewDetails">照片详情</view>
      </view>
    </view>
  </view>
  <!-- 加载更多/没有更多了 -->
  <view class="wrap" v-if="guestFilmList.length">
    <u-loadmore :status="status" :loading-text="loadingText" />
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLaunch, onShow, onHide, onReachBottom } from "@dcloudio/uni-app";
import { getGuestFilm, giveLove } from "@/api/guestFilm";
import { getItem } from "@/utils/localStorage";
import CustomNav from "@/components/CustomNav/index.vue";
import { userLoveGuestFilmList } from "@/api/user";

onMounted(() => {
  app();
});

const guestFilmList = ref([]);
const total = ref(0);

// 改变status即可
const status = ref("轻轻上拉");
const loadingText = ref("努力加载中");

// 页码
const pageNo = ref(1);
// 每页条数
const pageSize = ref(2);
// 店铺id（1：陕工院   2：西安时光锦）
const shopId = ref(2);

const app = async () => {
  if (guestFilmList.value.length) {
    // 获取了数据
    // 没有更多了
    if (guestFilmList.value.length >= total.value) {
      console.log("没有数据了");
      status.value = "nomore";
      return;
    }
  }

  const result = await userLoveGuestFilmList(
    getItem("userInfo").id,
    pageNo.value,
    pageSize.value
  );

  console.log("pageNo:", pageNo.value);
  console.log("客片：", result);

  // guestFilmList.value = result.data.record;
  total.value = result.data.total;

  if (guestFilmList.value) {
    guestFilmList.value = [...guestFilmList.value, ...result.data.record];
  }
};

// 页面触底了
onReachBottom(() => {
  status.value = "loading";
  pageNo.value++;

  app();
});

// 查看大图
const handleViewBigPhoto = () => {
  uni.navigateTo({
    url: "/pagesB/bigPicture/index",
  });
};

// 查看照片详情
const handleViewDetails = () => {
  uni.navigateTo({
    url: "/pagesB/photoDetails/index",
  });
};

const handleLove = async (guestFilmId, index) => {
  const result = await giveLove(guestFilmId, 2);
  console.log("result：", result);

  if (result.data.code == 200) {
    app();
    guestFilmList.value[index].isLiked = result.data.data;
  }
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  margin-top: 20rpx;
  width: 100%;

  .box {
    width: 100%;
    padding: 0 50rpx;
    margin-bottom: 30px;
    .top {
      display: flex;
      justify-content: space-between;
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 26rpx;

      .two {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .one {
      }
    }

    .info {
      display: flex;
      justify-content: flex-end;
      margin: 20rpx 0;

      .nickname {
        width: 80%;
        text-align: center;
        font-size: 30rpx;
        font-weight: 700;
      }

      .love {
        display: flex;
        align-items: center;

        .iconfont {
          font-size: 34rpx;
          margin-right: 10rpx;
        }

        .count {
          font-size: 34rpx;
        }

        .active {
          color: red;
        }
      }
    }

    .viewAll {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
      color: #3e3e3e;
      margin-top: 20rpx;

      view {
        display: inline;
        border: 1px solid #666666;
        padding: 13rpx 25rpx;
        border-radius: 5rpx;
      }
    }
  }
}
</style>
